<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import filter from "@/filter/filterForService"

export default {
  name: "AddImageMarker.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setZoom(14)
      let center = map.getCenter();

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_LAYER).addTo(map);

      let marker1 = new maptalks.Marker(center.sub(0.009, 0), {
            "symbol": {
              "markerFile": filter("relativePath2Img")("1.png"),
              "markerWidth": 28,
              "markerHeight": 40,
              "markerDx": 0,
              "markerDy": 0,
              "markerOpacity": 1
            }
          }
      ).addTo(layer);

      let marker2 = new maptalks.Marker(center.sub(0.006, 0), {
            "symbol": {
              "markerFile": filter("relativePath2Img")("2.png"),
              "markerWidth": 28,
              "markerHeight": 40,
              "markerDx": 0,
              "markerDy": 0,
              "markerOpacity": 1
            }
          }
      ).addTo(layer);

      let marker3 = new maptalks.Marker(center.sub(0.003, 0), {
            "symbol": {
              "markerFile": filter("relativePath2Img")("3.png"),
              "markerWidth": 28,
              "markerHeight": 40,
              "markerDx": 0,
              "markerDy": 0,
              "markerOpacity": 1
            }
          }
      ).addTo(layer);

      let marker4 = new maptalks.Marker(center, {
            "symbol": {
              "markerFile": filter("relativePath2Img")("4.png"),
              "markerWidth": 28,
              "markerHeight": 40,
              "markerDx": 0,
              "markerDy": 0,
              "markerOpacity": 1
            }
          }
      ).addTo(layer);

      let marker5 = new maptalks.Marker(center.add(0.003, 0), {
            "symbol": {
              "markerFile": filter("relativePath2Img")("5.png"),
              "markerWidth": 28,
              "markerHeight": 40,
              "markerDx": 0,
              "markerDy": 0,
              "markerOpacity": 1
            }
          }
      ).addTo(layer);

      let marker6 = new maptalks.Marker(center.add(0.006, 0), {
            "symbol": {
              "markerFile": filter("relativePath2Img")("6.png"),
              "markerWidth": 28,
              "markerHeight": 40,
              "markerDx": 0,
              "markerDy": 0,
              "markerOpacity": 1
            }
          }
      ).addTo(layer);

      let markerList = [marker1, marker2, marker3, marker4, marker5, marker6];

      markerList.forEach(marker => {
        marker.setInfoWindow({
          'custom': true,
          'content': `
                        <div class="info-window-content">
                            <div class="pop_time">Custom InfoWindow ${new Date().toLocaleTimeString()}</div>
                            <div class="arrow"></div>
                        </div>
                    `
        });

        marker.on("mouseover", () => {
          marker.openInfoWindow();
        })

        marker.on("mouseout", () => {
          marker.closeInfoWindow();
        })
      })
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style lang="less">
.info-window-content {
  color: #fff;
  width: 300px;
  height: 35px;
  background-color: #051127;
  border: 1px solid #0c2c45;

  .pop_time {
    height: 35px;
    margin: 0 10px;
    line-height: 35px
  }

  .arrow {
    display: block;
    border-top: 10px solid #162259;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
}
</style>
